<template>
  <a-card
    style="margin-top: 24px"
    :bordered="false"
    title="任务审核结果">

    <div slot="extra">
      <a-input-search placeholder="请输入" style="margin-left: 16px; width: 272px;" />
    </div>
    <a-list size="middle" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
      <a-list-item :key="index" v-for="(item, index) in data">
        <!-- <a-list-item-meta> -->
        <div class="taskDetail">
          <p slot="owner" class="userName">{{ item.owner }}</p>
          <p slot="wordInfo" class="wordInfo">{{ item.wordInfo }}</p>
        </div>
        <!-- 引入slot -->
        <!-- <a slot="owner" class="userName">{{ item.owner }}</a>
        <a slot="wordInfo">{{ item.wordInfo }}</a> -->
        <!-- </a-list-item-meta> -->
        <div class="list-content">
          <div class="list-content-item">
            <span>上传时间</span>
            <p>{{ item.startAt }}</p>
          </div>
          <div class="list-content-item">
            <span>相似度</span>
            <a-progress :percent="item.progress.value" :status="!item.progress.status ? null : item.progress.status" style="width: 180px" />
          </div>
          <!-- 另一种相似度的显示方式 -->
          <!-- <div class="list-content-item">
            <span>相似度</span>
            <p>{{ item.progress.value }}</p>
          </div> -->
        </div>
      </a-list-item>
    </a-list>
  </a-card>
</template>

<script>
// 演示如何使用 this.$dialog 封装 modal 组件
import TaskForm from './modules/TaskForm'
import Info from './components/Info'

const data = []
data.push({
  owner: '袁甜甜',
  startAt: '2018-07-26 22:44',
  wordInfo: '我家有6口人：爷爷、奶奶、爸爸、妈妈、弟弟和我。',
  progress: {
    value: 90
  }
})
data.push({
  owner: '乌力杰',
  startAt: '2018-07-26 22:44',
  wordInfo: '你现在有空吗？我想问你一个问题。',
  progress: {
    value: 54
  }
})
data.push({
  owner: '朱宇',
  startAt: '2018-07-26 22:44',
  wordInfo: '明天的会议很重要，请你安排好时间，准时到场。',
  progress: {
    value: 66
  }
})
data.push({
  owner: '王建源',
  startAt: '2018-07-26 22:44',
  wordInfo: '目前看来不算严重，但是尽快治疗，不能拖延，平时饮食清淡，多休息，不要抽烟喝酒。',
  progress: {
    value: 30
  }
})
data.push({
  owner: '吴慎宇',
  startAt: '2018-07-26 22:44',
  wordInfo: '我有许多朋友，其中既有健听人，也有聋人。',
  progress: {
    // status: 'exception',
    value: 100
  }
})

export default {
  name: 'StandardList',
  components: {
    TaskForm,
    Info
  },
  data () {
    return {
      data,
      status: 'all'
    }
  },
  methods: {
    add () {
      this.$dialog(TaskForm,
        // component props
        {
          record: {},
          on: {
            ok () {
              console.log('ok 回调')
            },
            cancel () {
              console.log('cancel 回调')
            },
            close () {
              console.log('modal close 回调')
            }
          }
        },
        // modal props
        {
          title: '新增',
          width: 700,
          centered: true,
          maskClosable: false
        })
    },
    edit (record) {
      console.log('record', record)
      this.$dialog(TaskForm,
        // component props
        {
          record,
          on: {
            ok () {
              console.log('ok 回调')
            },
            cancel () {
              console.log('cancel 回调')
            },
            close () {
              console.log('modal close 回调')
            }
          }
        },
        // modal props
        {
          title: '操作',
          width: 700,
          centered: true,
          maskClosable: false
        })
    }
  }
}
</script>

<style lang="less" scoped>
.taskDetail {
  width: 60%;
  display: flex;
  align-items: center;
  .userName {
    margin-right: 5%;
    width: 10%;
  }
  .wordInfo {
    // 注意文本换行的后续处理
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

.list-content-item {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 10px;
    margin-right: 30px;
    span {
        line-height: 20px;
    }
    p {
        margin-top: 4px;
        margin-bottom: 0;
        line-height: 22px;
    }
}
</style>
